<template>
<div>
  <h1>修改供应商</h1>
  <el-button type="primary" @click="returnsupplier">返回</el-button>
  <el-form :model="editsupplier" label-width="120px">
  <el-form-item label="供应商名字">
    <el-input v-model="editsupplier.name"></el-input>
  </el-form-item>
   <el-form-item label="供应商地址">
    <el-input v-model="editsupplier.address"></el-input>
  </el-form-item>
   <el-form-item label="供应商电话">
    <el-input v-model="editsupplier.phone"></el-input>
  </el-form-item>
  <el-form-item label="供应商网址">
    <el-input v-model="editsupplier.website"></el-input>
  </el-form-item>
   <el-form-item label="供应商营业照片">
  <el-upload
  class="avatar-uploader"
  action="/api/supplier/upload/add"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="editsupplier.url" :src="editsupplier.url" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
  </el-form-item>
  <el-form-item label="供应商备注">
    <el-input v-model="editsupplier.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="uploadsupplier">立即修改</el-button>
    <el-button  @click="cancelsupplier">取消</el-button>
  </el-form-item>
</el-form>
</div>
  
</template>


<script>
import suppierApi from "../../services/supplier";
export default {
  async created() {
    const data = await suppierApi.getSupplierById(this.$route.params.id); //得到需要修改的对象
    this.$store.commit("suppliers/setEditSupplier", data.data); //
    this.showimg = this.$store.state.suppliers.editSupplier.url;
  },
  computed: {
    editsupplier() {
      return this.$store.state.suppliers.editSupplier;
    }
  },
  methods: {
    supplier() {
      this.$router.push({
        name: "供应商"
      });
    },
    handleAvatarSuccess(res) {
      this.$store.state.suppliers.editSupplier.url = res.data[0]; //服务器的图片路径
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    uploadsupplier() {
      //修改
      const data = this.$store.state.suppliers.editSupplier;
      this.$store.dispatch("suppliers/modifySupplier", data);
    },
    cancelsupplier() {
      //取消
    },
    returnsupplier() {
      //返回
      this.$router.push({
        name: "supplier"
      });
    }
  }
};
</script>

<style scoped>
.el-input {
  width: 400px;
}
.el-time-picker {
  width: 300px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
